<template>
    <div id="wrap">
       <h1>组合式API</h1>
       <p>{{ str }}</p>
       <p>{{ num }}</p>
       <img :src="imgSrc" alt=""><br />
       <img :src="src" alt=""><br />
       <button @click="add">增加</button>
        <p>{{ data }}</p>
        <p>{{ test }}</p>
        <input type="text" v-model="test" /><br />
        <button @click="etid">改变</button>
    </div>
</template>
<script lang="ts">
import { ref } from "vue";
import imgSrc from '@/assets/images/7.png';
export default {
    name: 'dayStudent',
    setup() {
        const str=ref('你好世界')
        const num=ref(123)
        const src=ref('/src/assets/images/7.png')
        const data=ref(123)
        const test=ref('小明')
        const add=()=>{
            data.value++
        }
        const etid=()=>{
            str.value='我是普通变量，不支持UI刷新'
        }
        return{
            str,
            num,
            imgSrc,
            src,
            data, 
            test,
            add,
            etid,
        }
    },

}
</script>
<style lang="scss">
#wrap {
    width: 100%;
    height: 100%;
    text-align: center;

    h1 {
        color: white;
    }
    img{width: 300px;
        height: 200px;
    }
}
</style>